<template>
  <div>
    <h1>考试结果</h1>
    <el-card v-if="examInfo">
      <h1>{{ examInfo.examName }}</h1>
      <p><strong>描述：</strong>{{ examInfo.examDesc }}</p>
      <p><strong>开始时间：</strong>{{ examInfo.startTime }}</p>
      <p><strong>结束时间：</strong>{{ examInfo.endTime }}</p>
      <p><strong>总分：</strong>{{ examInfo.totalScore }}</p>
      <p><strong>及格分数：</strong>{{ examInfo.passScore }}</p>
      <p><strong>考试时长：</strong>{{ examInfo.Duration }} 分钟</p>

      <!-- Questions -->
      <el-collapse>
        <el-collapse-item
          v-for="question in questions"
          :key="question.questionId"
          :title="question.questionContent"
        >
          <!-- 根据题目类型渲染不同的答案选择方式 -->
          <div v-if="question.questionType === 1"> <!-- 单选题 -->
            <div v-for="option in question.answer" :key="option.id">
              {{ option.answer }} <span v-if="option.isTrue === 'true'">(正确)</span>
            </div>
          </div>
          <div v-if="question.questionType === 2"> <!-- 多选题 -->
            <div v-for="option in question.answer" :key="option.id">
              {{ option.answer }} <span v-if="option.isTrue === 'true'">(正确)</span>
            </div>
          </div>
          <div v-if="question.questionType === 3 || question.questionType === 4">
            <!-- 其他类型的题目 -->
            <p><strong>正确答案：</strong>{{ getCorrectAnswers(question.answer) }}</p>
          </div>
          <p><strong>解析：</strong>{{ question.analysis }}</p>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-message v-else type="warning" description="考试信息加载失败" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getExamInfoById, getQuestionById } from '@/api/ExamOnline/exam'
import { ElMessage } from 'element-plus'

// 获取路由参数
const route = useRoute()
const examId = ref<number | null>(null)

// 数据状态
const examInfo = reactive<any>({
  examName: '',
  examDesc: '',
  startTime: '',
  endTime: '',
  totalScore: 0,
  passScore: 0,
  Duration: 0
})

const questions = reactive<any[]>([])

// 获取考试信息
async function fetchExamInfo(id: number) {
  try {
    const { data } = await getExamInfoById(id)
    if (data && data.code === 200) {
      Object.assign(examInfo, {
        examName: data.data.examName,
        examDesc: data.data.examDesc,
        startTime: data.data.startTime,
        endTime: data.data.endTime,
        totalScore: data.data.totalScore,
        passScore: data.data.passScore,
        Duration: data.data.examDuration
      })

      const questionIds = data.data.questionIds.split(',').map(id => Number(id))
      await fetchQuestions(questionIds)
    } else {
      ElMessage.error('获取考试信息失败')
    }
  } catch (error) {
    console.error('Error fetching exam info:', error)
    ElMessage.error('获取考试信息失败')
  }
}

// 获取题目
async function fetchQuestions(questionIds: number[]) {
  try {
    const questionsData = await Promise.all(questionIds.map(async (id) => {
      const { data } = await getQuestionById(id)
      if (data && data.code === 200) {
        return data.data
      } else {
        ElMessage.error('获取题目失败')
        return null
      }
    }))
    questions.push(...questionsData.filter(q => q !== null) as any[])
  } catch (error) {
    console.error('Error fetching questions:', error)
    ElMessage.error('获取题目失败')
  }
}

// 获取正确答案
function getCorrectAnswers(answers: any[]) {
  if (!answers) return ''
  return answers
    .filter(answer => answer.isTrue === 'true')
    .map(answer => answer.answer)
    .join(', ')
}

// 组件挂载时获取数据
onMounted(() => {
  const id = Number(route.params.id)
  if (id) {
    examId.value = id
    fetchExamInfo(id)
  } else {
    ElMessage.error('无效的考试 ID')
  }
})
</script>

<style scoped lang="less">
/* 你的样式 */
</style>